<template>
    <div class="coach-page page">
        <div class="content">
            <PlatformCrumb back="返回" style="margin-top: 0;">
                <div class="plback">
                    <el-button size="small" type="primary" @click="seedetail">查看详情</el-button>
                    <el-button size="small" type="primary" @click="saveImage('pop3',detailForm.name)">导出档案</el-button>
                </div>
            </PlatformCrumb>
            <div class="playerDetail" id="pop3" ref="pop3">
                <h2 style="padding:20px 0 10px 40px;">基本资料</h2>
                <el-row>
                    <el-col :span="12" style="padding-left:40px;">
                        <el-form size="small" label-width="80px" style="margin-top:40px">
                            <el-form-item>
                                <h3>照片</h3>
                                <div class="peitu">
                                    <img width="200" v-if="detailForm.imgs" :src="detailForm.imgs|filtersImg" alt=""
                                    >
                                    <el-upload
                                            ref='upload'
                                            :action='imgupload'
                                            class="upload-demo"
                                            accept="image/jpeg,image/gif,image/png"
                                            :show-file-list="false"
                                            name="file"
                                            list-type="picture-card"
                                            :on-success="handleAvatarSuccess"
                                            multiple>
                                        <i class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                </div>
                            </el-form-item>
                            <el-form-item label="姓名">
                                <el-input v-model="detailForm.name"></el-input>
                            </el-form-item>

                            <el-form-item label="年龄">
                                <el-input v-model="detailForm.age"></el-input>
                            </el-form-item>

                            <el-form-item label="性别">
                                <el-select v-model="detailForm.sex" placeholder="请选择">
                                    <el-option
                                            v-for="item in optionsex"
                                            :key="item.value"
                                            :label="item.lable"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="擅长位置">
                                <el-input v-model="detailForm.goodLocation"></el-input>
                            </el-form-item>
                            <wound></wound>

                            <el-form-item label="分组">
                                <div class="sbsclass">
                                    <el-select v-model="detailForm.grouping" placeholder="请选择">
                                        <el-option
                                                v-for="item in options"
                                                :key="item.dictName"
                                                :label="item.dictName"
                                                :value="item.dictNo">
                                        </el-option>
                                    </el-select>
                                    <div class="sbs">
                                        <el-button type="primary" @click="open">新增分组</el-button>
                                        <el-button type="success" @click="movegroup">移除分组</el-button>
                                    </div>
                                </div>
                            </el-form-item>

                            <!-- <el-form-item label="课程">
                              <el-select v-model="detailForm.main" placeholder="请选择" multiple>
                                  <el-option
                                    v-for="item in optionsKC"
                                    :key="item.dictName"
                                    :label="item.dictName"
                                    :value="item.id">
                                  </el-option>
                              </el-select>
                            </el-form-item> -->

                            <el-form-item label="13~18岁球员才可以贴标签" label-width="200px"/>

                            <el-form-item label="球员技巧">
                                <el-select v-model="detailForm.skill" placeholder="请选择">
                                    <el-option
                                            v-for="item in optionsJQ"
                                            :key="item.dictName"
                                            :label="item.dictName"
                                            :value="item.dictNo">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="球员风格">
                                <el-select v-model="detailForm.style" placeholder="请选择">
                                    <el-option
                                            v-for="item in optionsFG"
                                            :key="item.dictName"
                                            :label="item.dictName"
                                            :value="item.dictNo">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </el-col>

                    <el-col :span="12">
                        <br>
                        <br>
                        <br>
                        <div id="myChart" style="height:300px;width:500px"></div>

                        <el-form size="small" style="padding:40px 0 0 170px;">
                            <el-form-item label="逆足">
                                <el-rate v-model="detailForm.weakFoot" style="margin-top:6px;" disabled></el-rate>
                            </el-form-item>

                            <el-form-item label="惯用脚">
                                <img src="/images/leftfoot.jpg" alt="" v-if="detailForm.foot === 1">
                                <img src="/images/rightfoot.jpg" alt="" v-else>
                            </el-form-item>
                        </el-form>

                    </el-col>
                </el-row>
                <br>
                <el-row>
                    <el-col :span="12">

                    </el-col>

                    <el-col :span="12">
                    </el-col>
                </el-row>

                <h2 style="margin-left:20px;">核心能力 综合得分：{{detailForm.sumScoure}}</h2>
                <div v-for="(item, index) in scorelist" :key="index" style="margin-left:20px">
                    <p style="margin-top:20px; margin-bottom: 20px"><strong>{{item.name}} 得分 {{item.score}}</strong></p>
                    <el-form inline style="margin-top:10px;">
                        <el-row :gutter="20">
                            <el-col :span="8" v-for="(item2, index2) in item.list" :key="index2">
                                <el-form-item style="height: 60px;" label-width="100px" :label="item2.name">
                                    <el-input min="1" oninput="if(value>10)value=10" style="width: 200px" max="10"
                                              type="number"
                                              @input="getscore2"
                                              v-model="item2.score"></el-input>
                                    <el-progress :percentage="parseFloat(item2.score*10)" :show-text="false"
                                                 style="margin-top:10px;"></el-progress>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>

                <br>
                <h2 style="margin-left:20px;">其他</h2>
                <br>
                <el-form label-width="80px" size="small">
                    <el-form-item label="逆足">
                        <el-rate v-model="detailForm.weakFoot" style="margin-top:6px;"></el-rate>
                    </el-form-item>

                    <el-form-item label="惯用脚">
                        <el-radio-group v-model="detailForm.foot">
                            <el-radio :label="1"><img src="/images/leftfoot.jpg" alt=""></el-radio>
                            <el-radio :label="2"><img src="/images/rightfoot.jpg" alt=""></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <comment></comment>
                    <el-form-item>
                        <el-button type="primary" @click="editDetail">保存</el-button>
                        <el-button @click="onCancel">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-dialog
                    title="详细信息"
                    :visible.sync="centerDialogVisible"
                    width="50%"
                    center>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <p class="xxxxmessage">在读学校:{{detailForm.school}}</p>
                    </el-col>
                    <el-col :span="12">
                        <p class="xxxxmessage">家庭住址:{{detailForm.address}}</p>
                    </el-col>
                    <el-col :span="12">
                        <p class="xxxxmessage">在读班级:{{detailForm.clas}}</p>
                    </el-col>
                    <el-col :span="12">
                        <p class="xxxxmessage">鞋码:{{detailForm.shoeSize}}</p>
                    </el-col>
                    <el-col :span="12">
                        <p class="xxxxmessage">身份证号码:{{detailForm.leaderNo}}</p>
                    </el-col>
                    <el-col :span="12">
                        <p class="xxxxmessage">服装尺码:{{detailForm.fz}}</p>
                    </el-col>
                    <el-col :span="12">
                        <p class="xxxxmessage">监护人姓名:{{detailForm.guardianName}}</p>
                    </el-col>
                    <el-col :span="12">
                        <p class="xxxxmessage">监护人电话:{{detailForm.guardianPhone}}</p>
                    </el-col>
                    <el-col :span="12">
                        <p class="xxxxmessage">监护人微信:{{detailForm.guardianWeChatNo}}</p>
                    </el-col>
                </el-row>

            </el-dialog>
        </div>
    </div>
</template>

<script>
    import PlatformCrumb from "@/components/PlatformCrumb.vue";
    import comment from "@/components/coach/comment.vue";
    import wound from "@/components/coach/wound.vue";
    import {baseImgPath, basefile, imgupload} from '@/config/env.js';
    import {mapActions} from 'vuex'
    import html2canvas from 'html2canvas'

    export default {
        components: {
            PlatformCrumb,
            wound,
            comment
        },
        data() {
            return {
                detailForm: {
                    name: '',
                    age: ''
                },
                optionsex: [
                    {'value': 0, 'lable': '未知'},
                    {'value': 1, 'lable': '男'},
                    {'value': 2, 'lable': '女'},
                ],
                radio: '',
                options: '',
                optionsKC: '',
                optionsJQ: '',
                optionsFG: '',
                centerDialogVisible: false,
                imgupload: imgupload,
                shangbinglist: [],
                sbls: {
                    "id": 0,
                    "name": "",
                    "playerId": this.$route.query.id,
                    "remarks": "",
                    "type": 0,
                    'imgs': ''
                },
                sbztlist: [
                    {
                        label: '轻度',
                        value: 0
                    }, {
                        label: '中度',
                        value: 1
                    }, {
                        label: '重度',
                        value: 2
                    }],
                scorelist: [],
                scorelist2: {
                    "list": [],
                    "playerId": this.$route.query.id
                },
                indicator: [],
                indicator2: []

            }
        },

        methods: {
            ...mapActions('coachTraining', [
                'getPlayerDetail',
                'fetchSelectList',
                'editPlayerInfo',
                'woundLogsgetList',
                'woundLogsedit',
                'woundLogsget',
                'woundLogsadd',
                'abilityaddScore',
                'abilitygetList',
                'addGroup',
            ]),
            dataURLToBlob(dataurl) {
                let arr = dataurl.split(',');
                let mime = arr[0].match(/:(.*?);/)[1];
                let bstr = atob(arr[1]);
                let n = bstr.length;
                let u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                return new Blob([u8arr], {type: mime});
            },
            /*保存图片的方法（即按钮点击触发的方法）
              第一个参数为需要保存的div的id名
              第二个参数为保存图片的名称 */
            saveImage(divText, imgText) {
                window.scrollTo(0, 0);
                let canvasID = this.$refs[divText];
                let that = this;
                let a = document.createElement('a');
                html2canvas(canvasID).then(canvas => {
                    let dom = document.body.appendChild(canvas);
                    dom.style.display = 'none';
                    a.style.display = 'none';
                    document.body.removeChild(dom);
                    let blob = that.dataURLToBlob(dom.toDataURL('image/png'));
                    a.setAttribute('href', URL.createObjectURL(blob));
                    //这块是保存图片操作  可以设置保存的图片的信息
                    a.setAttribute('download', imgText + '.png');
                    document.body.appendChild(a);
                    a.click();
                    URL.revokeObjectURL(blob);
                    document.body.removeChild(a);
                });
            },
            ...mapActions('myCourse', [
                'fetchCourseDetail',
                'addCourse',
                'editCourse'
            ]),
            onCancel() {
                this.$router.back()
            },
            seedetail() {
                this.centerDialogVisible = true
            },
            open() {
                this.$prompt('请输入分组名称', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(({value}) => {
                    this.addGroupfz(value)
                }).catch(() => {

                });
            },
            handleAvatarSuccess(res, file) {
                console.log(res);
                console.log(file);
                this.detailForm.imgs = res.data.path
                // this.addMatchdata.imgs = URL.createObjectURL(file.raw);
            },
            // 增加伤病
            woundLogsadd2() {
                var that = this;
                this.sbls.id = 0
                this.woundLogsadd(this.sbls).then(res => {
                    const {code} = res
                    if (code === 200) {
                        this.$message({
                            message: '增加成功',
                            type: 'success'
                        })
                        this.sbls = {
                            "id": 0,
                            "name": "",
                            "playerId": this.$route.query.id,
                            "remarks": "",
                            "type": 0,
                        }
                        that.getwoundLogsgetList()
                    }
                })
            },
            // 编辑伤病
            woundLogsedit2() {
                var that = this;
                this.woundLogsedit(this.sbls).then(res => {
                    const {code} = res
                    if (code === 200) {
                        this.$message({
                            message: '保存成功',
                            type: 'success'
                        })
                        this.sbls = {
                            "id": 0,
                            "name": "",
                            "playerId": this.$route.query.id,
                            "remarks": "",
                            "type": 0,
                        }
                        that.getwoundLogsgetList()
                    }
                })
            },
            fetchDetail() {
                const id = this.id
                this.getPlayerDetail({id}).then(res => {
                    const {code, data} = res
                    if (code === 200 && data) {
                        this.detailForm = data
                    }
                })
            },
            // 移除分组
            movegroup() {
                this.detailForm.grouping = 0
            },
            getSelect() {
                this.fetchSelectList({type: 'FZ'}).then(res => {
                    const {code, data: {list}} = res
                    if (code === 200) {
                        this.options = list || []
                    }
                })
            },
            getSelectKC() {
                this.fetchSelectList({type: 'CT'}).then(res => {
                    const {code, data: {list}} = res
                    if (code === 200) {
                        this.optionsKC = list || []
                    }
                })
            },
            getSelectJQ() {
                this.fetchSelectList({type: 'JQ'}).then(res => {
                    const {code, data: {list}} = res
                    if (code === 200) {
                        this.optionsJQ = list || []
                    }
                })
            },
            getwoundLogsgetList() {
                this.woundLogsgetList(
                    {"id": this.id}
                ).then(res => {
                    const {code, data: {list}} = res
                    if (code === 200) {
                        this.shangbinglist = list || []
                    }
                })
            },
            getSelectFG() {
                this.fetchSelectList({type: 'FG'}).then(res => {
                    const {code, data: {list}} = res
                    if (code === 200) {
                        this.optionsFG = list || []
                    }
                })
            },
            editDetail() {
                this.detailForm.age = Number(this.detailForm.age)
                this.editPlayerInfo(this.detailForm).then(res => {
                    const {code} = res
                    if (code === 200) {
                        this.getabilityaddScore()
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        })
                    }
                })
            },
            getscore2() {
                console.log("123");
                var scores3 = 0
                var data = this.scorelist
                var list = []
                for (var i = 0; i < data.length; i++) {
                    var scores = 0
                    for (var a = 0; a < data[i].list.length; a++) {
                        var d = {}
                        d.abilityId = data[i].list[a].id
                        d.score = data[i].list[a].score ? data[i].list[a].score : 0
                        scores = scores + parseFloat(d.score)
                    }
                    var scores2 = scores == 0 ? 0 : (scores / data[i].list.length)
                    data[i].score = scores2.toFixed(1)
                }
                this.scorelist = data
                for (var i = 0; i < data.length; i++) {
                    for (var a = 0; a < data[i].list.length; a++) {
                        var d = {}
                        d.abilityId = data[i].list[a].id
                        d.score = data[i].list[a].score
                        list.push(d)
                    }
                    var d = {}
                    d.abilityId = data[i].id
                    d.score = data[i].score
                    list.push(d)
                    scores3 = scores3 + parseFloat(data[i].score)
                }
                this.scorelist2.list = list
                var sumScoure = scores3 == 0 ? 0 : (scores3 / data.length)
                console.log(sumScoure);
                this.detailForm.sumScoure = sumScoure.toFixed(1)
                console.log(this.scorelist2);
                this.getecdata()

            },
            getecdata() {
                var data = this.scorelist
                var data3 = []
                var data4 = []
                for (var i = 0; i < data.length; i++) {
                    let data2 = {}
                    data2.text = data[i].name
                    data2.max = 10
                    data3.push(data2)
                    data4.push(data[i].score)

                }
                this.indicator = data3
                this.indicator2 = data4
                this.$nextTick(function () {
                    this.getchar()
                })
            },
            // 获取评分
            getabilityaddScore() {
                this.abilityaddScore(this.scorelist2).then(res => {
                    const {code} = res
                    if (code === 200) {
                        this.$message({
                            message: '保存成功',
                            type: 'success'
                        })
                        this.getabilitygetList()
                    }
                })
            },
            // 添加分组
            addGroupfz(e) {
                this.addGroup({name: e}).then(res => {
                    const {code} = res
                    if (code === 200) {
                        this.$message({
                            message: '新增成功',
                            type: 'success'
                        })
                        this.getSelect()
                    }
                })
            },

            getchar() {
                let myChart = this.$echarts.init(document.getElementById('myChart'))
                let data = {
                    polar: [
                        {indicator: this.indicator}
                    ],
                    series: [
                        {
                            type: 'radar',
                            itemStyle: {
                                normal: {
                                    // areaStyle: {
                                    //     type: 'default',
                                    //     opacity: 0.8, // 图表中各个图区域的透明度
                                    //     color: "#1686c2" // 图表中各个图区域的颜色
                                    // },
                                }
                            },
                            data: [
                                {
                                    value: this.indicator2
                                }
                            ]
                        }
                    ]
                };
                myChart.setOption(data);
            },
            getabilitygetList() {
                this.abilitygetList({'id': this.id}).then(res => {
                    const {code, data: {list}} = res
                    if (code === 200) {
                        this.scorelist = list
                        this.getscore2()
                    }
                })
            },
        },
        filters: {
            filterstype: function (type, data) {
                for (var i = 0; i < data.length; i++) {
                    if (type == data[i].value) {
                        return data[i].label
                    }
                }
            },
            filtersImg: function (img) {
                return basefile + img
            },
        },
        computed: {
            id() {
                return this.$route.query.id
            }
        },

        created() {
            this.fetchDetail()
            this.getSelect()
            this.getSelectKC()
            this.getSelectJQ()
            this.getSelectFG()
            this.getwoundLogsgetList()
            this.getabilitygetList()
        },

        mounted() {
            // this.getchar()
        }

    }
</script>

<style scoped>
    .playerDetail {
        margin: 0 auto;
        /*width: 1160px;*/
        background: #fff;
        padding: 10px;
    }

    .mt20 {
        margin-top: 20px;
    }

    .sbsclass {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .sbsclass .sbs {
        margin-left: 20px;
    }

    .coach-page {
        padding-top: 80px;
    }

    .coach-page .content {
        margin: 0 auto;
        width: 1140px;
        background-color: #fff;
        margin-bottom: 40px;
        margin-top: 12px;
    }

    .peitu {
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
    }

    .peitu img {
        margin-right: 20px;
    }

    .fenzubut {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-left: 10px;
    }

    .fenzubut button {
        margin-right: 10px;
    }

    .sbsclass {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .sbsclass .sbs {
        margin-left: 20px;
    }

    .plback {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .plback button {
        margin-left: 10px;
    }

    .xxxxmessage {
        line-height: 45px;
    }
</style>


